<!--  -->
<template>
  <div class="movie">
    <!-- 电影模块header开始 -->
    <div class="tab-header">
      <span class="location">东莞</span>
      <span
        class="normal"
        :class="{ active: hotMovie == 1 }"
        @click.stop="hotMovie = 1"
        >正在热映</span
      >
      <span
        class="normal"
        :class="{ active: hotMovie == 0 }"
        @click.stop="hotMovie = 0"
        >即将上映</span
      >
      <span
        class="icon-search"
        @click.stop="$router.push('search_movie')"
      ></span>
    </div>
    <!-- 电影模块header结束 -->
    <!-- 电影内容开始 -->
    <div class="tab-content">
      <!-- 热映列表开始 -->
      <div class="panel" v-show="hotMovie == 1">
        <HotMovieItem
          :item="item"
          v-for="item in hotMovies"
          :key="item.movie_id"
        ></HotMovieItem>
      </div>
      <!-- 热映列表结束 -->
      <!-- 待映列表开始 -->
      <div class="panel" v-show="hotMovie == 0">
        <ComingMovieItem
          :item="item"
          v-for="item in comingMovies"
          :key="item.movie_id"
        ></ComingMovieItem>
      </div>
      <!-- 待映列表结束 -->
    </div>
    <!-- 电影内容结束 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Tabbar from '@/components/tabbar/Tabbar.vue';
import HotMovieItem from '@/components/HotMovieItem.vue';
import ComingMovieItem from '@/components/ComingMovieItem.vue';
import axios from '@/api/instance';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Tabbar,
    HotMovieItem,
    ComingMovieItem,
  },
  data() {
    //这里存放数据
    return {
      hotMovies: [], // 正在热映的电影列表
      comingMovies: [], // 即将上映的电影列表
      hotMovie: 1, // 1 代表的是正在热映 0 代表的是即将上映
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {
        // console.log(newVal);
        this.hotMovie = newVal.query.hotMovie || 1;
      },
    },
  },
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 发送请求，获取页面列表需要的数据
    // /api/getMovieList
    axios.get('/api/getMovieList').then((res) => {
      // console.log(res);
      res.data.forEach((item) => {
        if (new Date(item.public_date) - new Date() > 0) {
          this.comingMovies.push(item);
        } else {
          this.hotMovies.push(item);
        }
      });
      this.hotMovies.sort((a, b) => b.score - a.score);
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.tab-content {
  margin-top: 1rem;
  font-size: 0.3125rem;
  padding: 0 0.3rem;
  padding-bottom: 1rem;
}
.panel {
  width: 100%;
}
.tab-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 1rem;
  width: 100%;
  font-size: 0.3125rem;
  background-color: #dd2727;
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
}
.normal {
  opacity: 0.6;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
}
.normal.active {
  color: #fff;
  border-bottom: 0.06rem solid #fff;
  opacity: 1;
}
.icon-search {
  font-size: 0.48rem;
}
</style>
